All Posts
News bits
MPA View Transitions の挙動を Speculative rules で改善する
MPA View Transitions の挙動を Speculative rules で改善する
View Transitions は最近 CSS のみで MPA でも利用できるようになったが、不安定な環境では、2 つの画面をスムーズに切り替えるためのページ読み込みによってフリーズしたような表示になってしまう場合がある。
これを特定のルートを事前レンダリングできるSpeculation Rules APIを利用して改善する方法についての記事。
https://ryanseddon.com/web/view-transitions-speculative/
次のような記述で事前レンダリングをブラウザに要求できる。
<script type="speculationrules">
{
"prerender": [
{
"where": {
"href_matches": "/*"
},
"eagerness": "moderate"
}
]
}
</script>現状 Speculation Rules API は、Firefox と Safari ではサポートされていない。
https://developer.chrome.com/docs/web-platform/prerender-pages?hl=en
著者について
Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.
In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.
In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.
In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.
I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.